<template>
   
 <div>
   <div class="homeitem" v-if="videolist">
    <div class="back" @click="back">
      <img src="../assets/img/back2.png" alt="">
    </div>
    <div class="video" @click="test">
      <transition name="myfade" tag="div">
        <van-slider
          v-model="currentPlay"
          bar-height="4px"
          v-if="!iconPlay"
          @input="sliderInputFun"
          @drag-start="sliderDragStartFun"
          @drag-end="sliderDragEndFun"
          active-color="#ee0a24"
          button-size="12px"
        />
      </transition>
       <transition name="bts" tag="div">
      <div class="bts" v-if="!iconPlay">
        <img src="../assets/img/play.png" alt="" @click.stop="togglePlay" />
      </div>
       </transition>
    
      <transition name="time" tag="div">
        <div class="time" v-if="!iconPlay">
          <div class="lefttime">{{ lefttime | playerTime }}</div>
          <div class="righttime">{{ righttime | playerTime }}</div>
        </div>
      </transition>

      <video
        :src="videolist.video.content.progressive[0].url"
        ref="video"
        @timeupdate="start"
        @loadeddata="end"
      ></video>
    </div>
    <!-- 视频 -->
    <div class="shownum">{{ commentslength }}</div>
    <div class="head">
      <van-tabs v-model="active" swipeable>
        <van-tab :title="'简介 '">
          <div class="introduction">
            <div class="head">
              <h2>{{videolist.title}}</h2>
            </div>
            <div class="type">
              <span>{{videolist.categories[0].category_name}}-{{videolist.categories[0].sub.category_name}}</span>
              <span> 11-03.{{videolist.ip_location}}</span><span>{{videolist.count.count_view | num}}次播放</span>
            </div>
            <div class="content" @click="flag=!flag">
              <p :class="{'cop':flag}">{{videolist.content}}</p>
            </div>
            <div class="like">
              <div class="one" @click="like(videolist.id)">
                <img src="../assets/img/lk.png" alt=""  v-show="!videolist.vr" />
                <img src="../assets/img/lk1.png" alt=""   v-show="videolist.vr" />
                <span>{{videolist.vr?videolist.count.count_like+1:videolist.count.count_like}}</span>
              </div>
              <div class="two" @click="collect(videolist.id)">
                <img src="../assets/img/cc.png" alt="" v-show="!videolist.is_private" />
                <img src="../assets/img/cc1.png" alt=""  v-show="videolist.is_private" />
                <span>{{videolist.is_private?videolist.count.count_collect+1:videolist.count.count_collect}}</span>
              </div>
              <div class="three">
                <img src="../assets/img/fs.png" alt="" />
                <span>{{videolist.count.count_share}}</span>
              </div>
              <div class="four">
                <img src="../assets/img/xz.png" alt="" />
                <span>下载</span>
              </div>
            </div>
            <div class="videoclass">
              <div class="box" v-for="item in videolist.tags" :key="item.id">
                <p>{{item.name}}</p>
              </div>
            </div>
            <div class="xiangg">相似视频</div>
               <div class="searchlist_content">
           <div class="box" v-for="item in resVideo" :key="item.id">
            <div class="left" @click="select(item.id)">
                <div class="time">{{item.duration|playerTimeone}}</div>
               <span><img :src="item.cover" alt=""></span>
            </div>
            <div class="right">
               <p>{{item.title}}</p>
               <h4>播放量{{item.count.count_view | num}}<span>喜欢{{item.count.count_like}}</span></h4>
               <div class="name">
                 <span class="cover">
                   <img :src="item.author.userinfo.avatar" alt="">
                 </span>
                 <span class="over"> {{item.author.userinfo.username}}</span>
               </div>
            </div>
        </div>
    </div>
          </div>
        </van-tab>
        <van-tab :title="'评论 '">
          <div class="comments">
            <div
              class="comments_item"
              v-for="item in commentslist"
              :key="item.id"
            >
              <div class="left">
                <div
                  class="bgimg" >
                <img :src="item.userInfo.avatar" alt=""></div>
                <div class="v" v-show="item.userInfo.vip_flag > 0">
                  <img src="../assets/img/zq.png" alt="" />
                </div>
                <div class="left_content">
                  <h6>{{ item.userInfo.username }}</h6>
                  <div class="one">
                    {{ item.content }}
                  </div>
                  <div class="two">
                    <div class="left">
                      <span> &nbsp;&nbsp;</span
                      ><span>{{ item.ip_location }}</span>
                    </div>
                    <div class="right">
                      <span><img src="../assets/img/Ac1.png" alt="" /></span>
                      <span
                        ><img src="../assets/img/like.png" alt="" />{{
                          item.userInfo.count.count_liked
                        }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
              <div class="right">
                <!-- <span>1</span> -->
                <img src="../assets/img/Zk1.png" alt="" />
                <!-- <img src="../assets/img/likes.png" alt=""> -->
              </div>
            </div>
          </div>
          <div class="more">暂时没有更多了</div>
          <div class="ipt">
            <input type="text" v-model="comment" placeholder="我有话要说" @keyup.enter="addcomment(videolist.id)" />
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
 </div>
</template>

<script>
import axios from "axios";
import { getHomeitem } from "../api/homeitem";
export default {
  data() {
    return {
      flag:true,
      id: null,
      active: 0,
      videolist: null,
      commentslist: null,
      commentslength: null,
      iconPlay: false,
      lefttime: null,
      righttime: null,
      currentPlay: null, //视频进度
      resVideo:null,
      currentId:null,
      daychance:null,
      comment:'',

    };
  },
  methods: {
    getHomeitemFun(id) {
      getHomeitem({ resource_id: id }).then((data) => {
        this.commentslist = data.data.list;
        this.commentslength = data.data.total;
        console.log(this.commentslist);
      });
    },
    //https://apis.netstart.cn/xpc/article/11757597
    getHomevideoFun(id) {
      axios.get(`https://apis.netstart.cn/xpc/article/${id}`).then((data) => {
        // console.log(data.data);
        this.videolist = data.data.data;
        let templike=JSON.parse(window.localStorage.getItem('islike'))
        if (templike!=null) {
          let index=templike.findIndex(item=>item.children[0].model.resource.id==this.videolist.id)
          if (index!=-1) {
               this.videolist.vr=templike[index].children[0].model.resource.vr  //有相同的
          }
        }
        let tempcollect=JSON.parse(window.localStorage.getItem('iscollect'))
        if (tempcollect!=null) {
          let index=tempcollect.findIndex(item=>item.children[0].model.resource.id==this.videolist.id)
          if (index!=-1) {
             this.videolist.is_private=tempcollect[index].children[0].model.resource.is_private  //有相同的
          }
        }
      
      })
    },
      // https://apis.netstart.cn/xpc/article/11757597/next
    getHomeReleasevideoFun(id) {
      axios.get(`https://apis.netstart.cn/xpc/article/${id}/next`).then((data) => {
        this.resVideo = data.data.data.list
        
      })
    },
    test() {
      this.iconPlay = false;
      this.$refs.video.pause();
    },
    // 播放按钮切换
    togglePlay() {
      this.iconPlay = !this.iconPlay;

      if (this.iconPlay) {
        //播放
        this.$refs.video.play();
      } else {
        //暂停
        this.$refs.video.pause();
      }
    },
    // 结束的时候触发
    end() {
      this.righttime = this.$refs.video.duration; //视频总时长
      // console.log(this.righttime);
    },
    start() {
      this.lefttime = this.$refs.video.currentTime; //视频实时时间
      //  console.log(this.lefttime);
      this.currentPlay = 100 * (this.lefttime / this.righttime); //视频进度
      // console.log(this.currentPlay);
    },
    // 拖动进度条播放
    sliderInputFun(value) {
      let time = (value / 100) * this.righttime;
      this.lefttime = time;
      // console.log(this.$refs.video);
      // this.$refs.video.currentTime = time;
    },

    // 控制进度条开始与结束之间效果
    sliderDragStartFun() {
      this.$refs.video.pause(); //暂停
    },
    sliderDragEndFun() {
      this.$refs.video.play(); //播放
    },
    select(id){
      this.currentId=id
      this.getHomeitemFun(this.currentId)
      this.getHomevideoFun(this.currentId)
      this.getHomeReleasevideoFun(this.currentId)
    },
    back(){
      this.$router.go(-1)
    },
    getOutFun(){
      //  https://apis.netstart.cn/xpc/home/hot
        axios.get("https://apis.netstart.cn/xpc/home/hot").then((data) => {
        var daychanceList=data.data.data.children
        this.daychance=daychanceList.filter(item=>item.type=='uiBigCard')
      });
    
    },
    like(id){
      console.log(id);
       let templike=JSON.parse(window.localStorage.getItem('islike'))
       if (templike!=null) {
            let index =templike.findIndex(item=>item.children[0].model.resource.id==id)
            if (index!=-1) {
                templike[index].children[0].model.resource.vr=!templike[index].children[0].model.resource.vr
                window.localStorage.setItem('islike',JSON.stringify(templike))
            }else{
               let indexone=this.daychance.findIndex(item=>item.children[0].model.resource.id==id)
               let temp=this.daychance[indexone]
               temp.children[0].model.resource.vr=!temp.children[0].model.resource.vr
               templike.push(temp)
                window.localStorage.setItem('islike',JSON.stringify(templike))
            }
        
       }
       else{
         let indexone=this.daychance.findIndex(item=>item.children[0].model.resource.id==id)
         let temp=this.daychance[indexone]
               temp.children[0].model.resource.vr=!temp.children[0].model.resource.vr
               templike=[];
               templike.push(temp)
               window.localStorage.setItem('islike',JSON.stringify(templike))
       }
       this.getHomevideoFun(this.id); 
    },
    collect(id){
      console.log(id);
       let tempcollect=JSON.parse(window.localStorage.getItem('iscollect'))
       if (tempcollect!=null) {
            let index =tempcollect.findIndex(item=>item.children[0].model.resource.id==id)
            if (index!=-1) {
                tempcollect[index].children[0].model.resource.is_private=!tempcollect[index].children[0].model.resource.is_private
                window.localStorage.setItem('iscollect',JSON.stringify(tempcollect))
            }else{
               let indexone=this.daychance.findIndex(item=>item.children[0].model.resource.id==id)
               let temp=this.daychance[indexone]
               temp.children[0].model.resource.is_private=!temp.children[0].model.resource.is_private
               tempcollect.push(temp)
                window.localStorage.setItem('iscollect',JSON.stringify(tempcollect))
            }
        
       }
       else{
         let indexone=this.daychance.findIndex(item=>item.children[0].model.resource.id==id)
         let temp=this.daychance[indexone]
               temp.children[0].model.resource.is_private=!temp.children[0].model.resource.is_private
               tempcollect=[];
               tempcollect.push(temp)
               window.localStorage.setItem('iscollect',JSON.stringify(tempcollect))
       }
       this.getHomevideoFun(this.id); 
    },
    addcomment(id){
       console.log(id);
       console.log(this.comment);
      //  let tempcom=JSON.parse(window.localStorage.getItem('iscom'))
      //  tempcom=tempcom==null?[]:tempcom
      //  let obj{
            
      //  }
      // console.log(this.commentslist);
      let obj={
          id:88888888,
          userInfo:{
            avatar:'https://img2.baidu.com/it/u=4043495183,2954281760&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
            username:'小赵',
            count:{
              count_liked:0
            },
          },
          content:this.comment,
          ip_location:'广东'
      }
      this.commentslist.unshift(obj)
      this.comment=''
    }
    

  },
  created() {
    this.id = this.$route.query.reid;
    this.currentId=this.$route.query.reid
    this.getHomeitemFun();
    this.getHomevideoFun(this.id);
    this.getHomeReleasevideoFun(this.id);
    this.getOutFun();
    
  },
  filters: {
    playerTime(data) {
      let m = parseInt(data / 60); //分钟
      let s = parseInt(data % 60); //秒
      if (m == 0 && s == 0) {
        return "0:00";
      } else {
        return m + ":" + (s < 10 ? "0" + s : s); //0:01
      }
    },
    num(value){
         if (value<10000) {
            return value
         }
         let w =value/10000
         return  Number(w).toFixed(1) +'w'
    },
     playerTimeone(data) {
          let m = parseInt(data / 60); //分钟
          let s = parseInt(data % 60); //秒
        
        return (m >10? m: "0" + m) +"'"+ (s <10 ? "0" + s : s)+"''"; 
         
       },  
  },
};
</script>

<style lang="less">
.homeitem {
  .myfade-enter-active,
  .myfade-leave-active {
    transition: all 0.8s linear;
  }
  /* 进场的瞬间与离场的效果添加 */
  .myfade-enter,
  .myfade-leave-to {
    transform: translateY(50px);
  }
  .time-enter-active,
  .time-leave-active {
    transition: all 0.8s linear;
  }
  /* 进场的瞬间与离场的效果添加 */
  .time-enter,
  .time-leave-to {
    transform: translateY(50px);
  }
   .bts-enter-active,
  .bts-leave-active {
    transition: all 0.8s linear;
  }
  /* 进场的瞬间与离场的效果添加 */
  .bts-enter{
     opacity: 0;
  }
  .bts-leave-to {
    opacity: 1;
  }
  position: relative;
  height: 1200px;
  .back{
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 99;
    img{
      width: 25px;
      height: 25px;
    }
  }
  .video {
    background-color: #fff;
    width: 100%;
    height: 210px;
    overflow: hidden;
    position: fixed;
    z-index: 55;
    top: 0px;
    left: 0px;
    right: 0px;
    .time {
      width: 100%;
      display: flex;
      justify-content: space-between;
      position: absolute;
      color: white;
      font-size: 12px;
      bottom: 7px;
      .lefttime {
        padding-left: 5px;
      }
      .righttime {
        padding-right: 5px;
      }
    }
    .van-slider {
      position: absolute;
      z-index: 999;
      top: 195px;
      left: 38px;
      width: 80%;
    }
    .bts {
      position: absolute;
      left: 46%;
      top: 40%;
      z-index: 500;
    }
    video {
      width: 100%;
      height: auto;
    }
  }
  .van-tabs__nav {
    position: fixed;
    z-index: 80;
    top: 210px;
    width: 100%;
    height: 40px;
    padding-bottom: 0px;
    background-color: #fff;
  }
  .van-tabs__line {
    bottom: 0px;
    left: -2px;
    width: 30px;
  }
  .van-tab {
    padding: 0px;
  }
  .shownum {
    position: fixed;
    top: 221px;
    right: 60px;
    z-index: 999;
    font-size: 14px;
    color: red;
  }
  .head {
    background-color: #fff;
    .introduction {
      background-color: #fff;
      width: 90%;
      margin: 0 auto;
      margin-top: 210px;
      .head {
        padding: 10px 0;
        display: flex;
        align-items: center;
        .bgcover {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          // background-image: url(../assets/img/test.png);
          background-repeat: no-repeat;
          background-size: cover;
        }
      }
      .type {
        padding: 10px 0px;
        span {
          color: gray;
          font-size: 12px;
          display: inline-block;
          margin-right: 10px;
        }
      }
      .content {
        font-size: 13px;
        color: rgb(69, 69, 69);
        .cop{
          text-overflow:ellipsis;
         overflow: hidden;
         display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        }
      }
      .like {
        padding: 40px 0px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .one,
        .two,
        .three,
        .four {
          img {
            display: block;
            width: 20px;
            margin: 0 auto;
          }
          span {
            padding: 10px 0px;
            display: block;
            color: rgb(25, 25, 25);
            text-align: center;
            font-size: 14px;
          }
        }
        // .three{
        //   img{
        //     width: 25px;
        //   }
        // }
        // .four{
        //   img{
        //     width: 25px;
        //   }
        // }
      }
      .videoclass {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #f2f2f2;
        p {
          height: 12px;
          line-height: 12px;
          display: inline-block;
          padding: 5px 10px;
          background-color: #e6e1e1;
          font-size: 12px;
          border-radius: 5px;
          margin-right: 5px;
          margin-bottom: 8px;
          color: #252525;
        }
      }
      .xiangg {
        padding: 10px 0px;
        border-bottom: 1px solid #f2f2f2;
      }
      .searchlist_content {
        width: 100%;
        margin: 0 auto;
        .box {
          display: flex;
          justify-content: space-between;
          padding: 10px 0px;
          border-bottom: 1px solid #f2f2f2;

          align-items: center;
          .left {
            width: 50%;
            position: relative;
            .time {
              position: absolute;
              bottom: 8px;
              left: 115px;
              color: #fff;
              font-size: 12px;
            }
            span {
              width: 90%;
              display: block;
              border-radius: 8px;
              overflow: hidden;
              img {
                width: 100%;
                height: 90px;
              }
            }
          }
          .right {
            width: 48%;
            h4 {
              padding: 5px 0px;
              font-size: 10px;
              span{
                display: inline-block;
                margin-left: 10px;
              }
            }
            p {
              font-size: 13px;
              font-weight: 600;
            }
            .name {
              font-size: 12px;
              color: gray;
              line-height: 20px;
              display: flex;
              
       
              span {
                display: inline-block;
                margin-right: 8px;
                width: 20px;
                height: 20px;
               
            
                img{
                  width: 20px;
                  height: 20px;
                  border-radius: 50%;
                }
               
              }
              .over{
                width: 80px;
                display: inline-block;
                text-overflow:ellipsis;
                overflow: hidden;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
    .comments {
      padding: 0px 10px;
      background-color: #fff;
      margin-top: 200px;
      border-bottom: 1px solid #f2f2f2;
      .num {
        h5 {
          font-size: 14px;
          color: gray;
          padding: 10px 0px;
        }
      }
      .comments_item {
        display: flex;
        justify-content: space-between;
        padding: 15px 0px;
        border-bottom: 1px solid #f2f2f2;
        .left {
          display: flex;
          width: 100%;
          position: relative;
          .bgimg {
          
            width: 35px;
            height: 35px;
            margin-right: 10px;
            img{
              width: 35px;
              
            height: 35px;
            border-radius: 50%;
            }
          }
          .v {
            position: absolute;
            left: 28px;
            bottom: 30px;
            img {
              width: 12px;
            }
          }
          .left_content {
            width: 90%;
            h6 {
              color: gray;
            }
            .one {
              font-size: 600;
              margin-right: 10px;
              font-size: 14px;
              display: block;
              padding: 5px 0px;
            }
            .two {
              padding: 5px 0px;
              display: flex;
              color: gray;
              font-size: 10px;
              justify-content: space-between;
              .right {
                position: relative;
                left: 30px;
                span {
                  display: block;
                  display: flex;
                  margin-right: 10px;
                  color: gray;
                  img {
                    margin-right: 5px;
                  }
                }
              }
            }
          }
        }
        .right {
          display: flex;
          padding-right: 10px;
          img {
            width: 15px;
            height: 15px;
          }
          span {
            display: block;
            color: salmon;
            width: 30px;
          }
        }
      }
    }
    .more {
      padding: 10px 0px;
      padding-bottom: 100px;
      background-color: #fff;
      font-size: 14px;
      color: gray;

      text-align: center;
    }
    .ipt {
      background-color: #fff;
      position: fixed;
      bottom: 0px;
      padding: 10px 20px;
      width: 100%;
      box-sizing: border-box;
      input {
        width: 100%;
        height: 27px;
        border: 1px solid #c4c1c1;
        outline: hidden;
        border-radius: 5px;
        background-color: #e4e3e3;
        font-size: 14px;
      }
    }
  }
}
</style>